<div [formGroup]="form">

  <nz-table nzTemplateMode nzBordered [nzSize]="'small'" [nzTableLayout]="tableLayout">
    <thead>
      <ng-content></ng-content>
      <tr>
        <!-- 序号列标题 -->
        <th *ngIf="enableNo" [nzAlign]="tableAlign" nzWidth="60px">序号
        </th>
        <!-- 表单列form header -->
        <ng-container *ngFor="let item of headerConfig;let index=index">
          <ng-container *ngIf="!item.hide">
            <th *ngIf="!item.template" [nzAlign]="tableAlign" [nzWidth]="item.width"><label
                *ngIf="item.showRequiredTip" [ngStyle]="{'color': 'red'}">*</label> {{item.header}}
            </th>
            <th *ngIf="item.template" [nzAlign]="tableAlign">
              <ng-container [ngTemplateOutlet]="item.template"
                [ngTemplateOutletContext]="{$implicit:item,index:index}"></ng-container>
            </th>
          </ng-container>
        </ng-container>
        <!-- 自定义展示列header -->
        <th *ngFor="let item of thTemplateOfNullInForm;let i=index" [nzAlign]="tableAlign"
          [nzWidth]="item.width">
          <ng-container [ngTemplateOutlet]="item.template"
            [ngTemplateOutletContext]="{$implicit:i}"></ng-container>
        </th>
      </tr>
    </thead>
    <tbody formArrayName="formArray">

      <ng-container *ngFor="let data of arrayData;let i=index;">
        <tr>
          <!-- 序号列 -->
          <td *ngIf="enableNo" [nzAlign]="tableAlign">
            {{i+1}}
          </td>
          <!-- 表单列将放进form -->
          <ng-container [formGroup]="data">
            <ng-container *ngFor="let item of contentConfig">
              <ng-container *ngIf="!item.hide">
                <td *ngIf="!item.template" [nzAlign]="tableAlign">
                  <nz-form-control [nzErrorTip]="item.errorTip">
                    <input nz-input [placeholder]="item.placeholder||'请输入'"
                      *ngIf="item.type==='input'&&item.controlMode!=='readonly'&&!!item.controlName"
                      [formControlName]="item.controlName" [maxlength]="item.maxLength" />
                    <nz-input-number [ngStyle]="{'width': 'auto'}"
                      *ngIf="item.type==='number'&&item.controlMode!=='readonly'&&!!item.controlName"
                      [formControlName]="item.controlName" [nzMin]="1" [nzStep]="1"
                      [nzMax]="item.max" [nzPlaceHolder]="item.placeholder||'输入数字'">
                    </nz-input-number>
                    <nz-input-number [ngStyle]="{'width': 'auto'}"
                      *ngIf="item.type==='discount'&&item.controlMode!=='readonly'&&!!item.controlName"
                      [formControlName]="item.controlName" [nzMin]="0" [nzStep]="1" [nzMax]="100"
                      [nzFormatter]="formatterPercent" [nzParser]="parserPercent"
                      [nzPlaceHolder]="item.placeholder||'输入数字'">
                    </nz-input-number>
                    <nz-date-picker
                      *ngIf="item.type==='date'&&item.controlMode!=='readonly'&&!!item.controlName"
                      [formControlName]="item.controlName">
                    </nz-date-picker>
                    <nz-select class="width-full" nzShowSearch="true"
                      [nzAllowClear]="item.allowClear"
                      *ngIf="item.type==='select'&&item.controlMode!=='readonly'&&!!item.controlName"
                      [formControlName]="item.controlName"
                      [nzPlaceHolder]="item.placeholder||'请选择'">
                      <nz-option [nzValue]="option.value" [nzLabel]="option.label"
                        *ngFor="let option of item.options">
                      </nz-option>
                    </nz-select>

                    <label nz-radio
                      *ngIf="item.type==='radio'&&item.controlMode!=='readonly'&&!!item.controlName"
                      [formControlName]="item.controlName"></label>

                    <span *ngIf="item.controlMode==='readonly'">
                      <ng-container *ngIf="item.format">
                        {{ item.format(data.get(item.controlName).value)|dataNull}}
                      </ng-container>
                      <ng-container *ngIf="!item.format">
                        {{ data.get(item.controlName).value|dataNull}}
                      </ng-container>
                    </span>

                  </nz-form-control>
                </td>
              </ng-container>

              <ng-container *ngIf="item.template">
                <td *ngIf="!item.hide" [nzAlign]="tableAlign">
                  <ng-container [ngTemplateOutlet]="item.template"
                    [ngTemplateOutletContext]="{$implicit:item,formGroup:data,errorTip:item.errorTip,index:i}">
                  </ng-container>
                </td>
              </ng-container>
            </ng-container>
          </ng-container>
          <!-- 自定义展示列 -->
          <td *ngFor="let item of tdTemplateOfNullInForm;" [nzAlign]="tableAlign">
            <ng-container [ngTemplateOutlet]="item.template"
              [ngTemplateOutletContext]="{$implicit:data,index:i}"></ng-container>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
</div>
